<template>
	<view>
		<view  class="orderList">
			
			<order-data :data="orderlist" @gophone="goPhone()" @goStore="goStore()"></order-data>
			<!-- 退款原因 -->
		  <view class="reason" >
			  <view class="reasontext">
			  	退款原因
			  </view>
				<u--textarea v-model="mode.refundReason" placeholder="请输入订单备注内容" ></u--textarea>
				<view class="upload">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
					
						name="1"
						multiple
						:maxCount="9"
					></u-upload>
				</view>
					
			</view>
			
			<!-- 文件上传 -->
			
		</view>
		
		<!-- 确认申请退款按键 -->
		<view class="reason-button" @click="goPrinterAdd()" >
			<up-button  style="" color="#FE861C;" :customStyle="{height:' 96rpx',borderRadius:'20rpx'}">
			申请退款
		</up-button>
		</view>
	</view>
</template>

<script setup>
	import  orderData  from "@/components/orderlist/orderlist.vue"
	import {
		UploadFile,
	} from '@/utils/Server';
    import {ref,reactive,onMounted,} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app';
	import {oredrDitils,ordercancel,refund,track} from "@/api/order.js"
	import {
		BASE_URL
	} from "@/utils/Server/index.js"
	
	onLoad((e)=>{
		mode.value.orderId = e.orderId
		// console.log("当前订单好",dataList.orderId);
	})
	onShow(()=>{
		getOrderDetails()
	})
	//订单信息
	const data = ref({
	
	})
	const phone = ref({
	
	})
		const fileList = reactive([]) //文件上传
	//拨打电话
	const goPhone = () => {
		uni.makePhoneCall({
			phoneNumber: phone.value
		})
		console.log("拨打电话啊", phone.value);
	}
	//跳转商户
	const goStore = () => {
		uni.navigateTo({
			url: '/page_index/storedetals?id=' + modes.value.orderInfo.storeId
		})
	
	}

	//订单商品
	const orderlist = ref({
		show: true,
		tradeName: "",
		distributionMode: "",
		num: "",
		orderList: [{
			orderPicture: "",
			specification: "",
			singleorderNum: "",
			name: "",
			singlePrice: "",
		}],
		balingCharge: "",
		deliveryFee: '',
		servicePrice: '',
		totalPrice: ''
	})
	//获取订单详情
	//获取订单详情
	const mode = ref({ //发送的数据
		orderId: '', //订单号
		 refundReason:'',
		 refundImages:[],
		 
		 
	})
	let getOrderDetails = ()=>{
		 orderlist.value.orderList = []
		 	oredrDitils({
		 		orderId: mode.value.orderId
		 	}).then(res => {
				console.log("res啊啊",res);
		 		phone.value = res.result.storeInfo.phone
		 		orderlist.value.tradeName = res.result.orderInfo.storeName //店铺名称
		 		orderlist.value.balingCharge = res.result.orderInfo.packagePrice //打包费`
		 		orderlist.value.deliveryFee = res.result.orderInfo.deliveryFee //配送费
		 		orderlist.value.totalPrice = res.result.orderInfo.totalPrice //所有商品总价
		 		res.result.orderGoods.forEach(item => { //商品列表
		 			orderlist.value.orderList.push({
		 				goodsImages: item.goodsImages[0], //商品图片1
		 				goodsName: item.goodsName, //商品名称2
		 				singleorderNum: item.goodsNum, //商品数量1
		 				specification: item.goodsSpecSuk, //商品规格1
		 				subtotalPrice: item.totalPrice, //当前商品价格1
		 				batchingIds: item.batchings, //商品配料1
		 			})
		 		})
		 	})
	}
	
	//发送数据images: Images.value
	let goPrinterAdd = ()=>{
		refund({...mode.value}).then(res=>{
			console.log("退款盛情",res);
			if(res.code == 200){
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				uni.switchTab({
					url:'/pages/order/order'
				})
			}
			
		})
	}
	
	async function afterRead(event) {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = fileList.length
		lists.map((item) => {
			fileList.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			UploadFile(lists[i].url).then(res => {
				let item = fileList[fileListLen]
				fileList.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: res.result
				}))
				fileListLen++
				
				
					mode.value.refundImages.push(res.result)
				
				console.log("fileList", mode.value.refundImages);
			})
		}
	}
	// async function deletePic(event) {
	// 	removeFileApi({
	// 		fileUrl: event.file.url
	// 	})
	// 	fileList.splice(event.index, 1)
	// }
</script>

<style lang="scss">
	.reason-button{
		padding: 40rpx 40rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		// background-color: #fff;
	}
.reason{
	margin-top: 20rpx;
	padding: 30rpx 20rpx;
	// border: #FB2A2A solid 1px;
	background: #FFFFFF;
	border-radius: 20rpx;
	.reasontext{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #010101;
		padding-bottom: 20rpx;
	}
	.upload{
		padding-top: 20rpx;
	}
}

	.countPrice{
		text-align: right;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FB2A2A;
	}
	.expense1{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #171717;
	}
	.expense{
		display: flex;
		margin-top: 30rpx;
		justify-content: space-between;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #010101;
	}
	.price{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #171717;
	}
	.num{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #171717;
		width: 25%;
	}
	.Alllist-1{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	.Alllist-text1{
		width: 420rpx;
		// text-align: left;
	}
	
	.Alllist-text2{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6C6C6C;
		padding-top: 11rpx;
	
	}
	.Alllist-text{
		
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #010101;
	}
	.Alllistpic{
		width: 76rpx;
		height: 76rpx;
		background: #999999;
		border-radius: 5rpx;
		margin-right: 16rpx;
	}
	.Alllist{
		display: flex;
		
	}
	.hesder2{
		display: flex;
		align-items: center;
		
	}
	.hesder{
		display: flex;
		align-items: center;
		width: 70%;
	}
	.orderListheader{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.card-one-svg{
		display: inline-block;
		    overflow: hidden;
		width: 80rpx;
		height: 44rpx;
		// padding-top: 6rpx;
		padding-left: 10rpx;
	}
	.orderimage2{
		width: 31rpx;
		height: 29rpx;
		padding-right: 12rpx;
	}
	.orderList-two{
		height: auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		bottom: 40rpx;
		padding:30rpx 20rpx 30rpx 20rpx;
	}
  .orderList-one{
	  background-color: #FFFFFF;
	  border-radius: 20rpx;
	   padding:20rpx 20rpx 20rpx 20rpx;
  }
	.orderList{
		// border: red solid 1px;
		z-index: 10;
		 padding:0rpx 20rpx 0rpx 20rpx;
		width: calc(100% - 0rpx); 
		height:auto; 
		// bottom: 0rpx;
		
		// position: absolute; 
		// top:540rpx;
		box-sizing:border-box;
		
	}
</style>
